<template>
  <div style="width: 100%; height:100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
   data() {
    return {
      xdata:['类型一','类型二','类型三','类型四'],
      seriesdata:[
          {
            name:'指标一',
            data: [487,677,545,857],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '30' + '%'
          }
          ,
          {
            name:'指标二',
            data: [560,699,327,292],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '30' + '%'
          }
          
      ],
      echarts:null
    };
  },
  methods: {
    appendTotalSerires(){
      let extraBarData = [];
      let extraBarText = [];
      const data = this.seriesdata.map(v => v.data)
      const arrSum = arr => arr.reduce((prev, curr) => prev + curr, 0);
      for (let col = 0; col < data[0].length; col++) {
        const values = []
        for (let row = 0; row < data.length; row++) {
          values.push(data[row][col])
        }
        const totalSum = arrSum(values)
        extraBarData.push(totalSum)
        extraBarText.push(values.join(" / "))
      }
      this.seriesdata.unshift(
        {
          name: "总计",
          type: "bar",
          barGap: "-100%",
          hiddenLegend: true,
          data: extraBarData,
          barCategoryGap: '30' + '%',
          label: {
            show: true,
            position: "right",
            textStyle: {
              fontWeight: "bold",
              fontSize: 14,
              color: "rgba(255, 255, 255, 0.8)",
            },
            formatter: function({ dataIndex }) {
              return extraBarText[dataIndex];
            },
          },
        }
      )
    },
    echartsData() {
      const option = {
        color: [
          "#5b8ff9",
          "#61ddaa",
          "#65789b",
          "#f6bd16",
          "#7262fd",
          "#78d3f8",
          "#9661bc",
          "#f6903d",
          "#008685",
          "#f08bb4"],
        title: {
          show: true,
          text: "图表标题",
          left: "10%",
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 18,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          icon: "rect",
          color: "rgba(255, 255, 255, 0.8)",
          left: "10%",
          top: "15%",
          itemGap: 20,
          textStyle: {
            color: 'rgba(255,255,255,.8)'
          },
          data: this.seriesdata.filter(v => !v.hiddenLegend).map(v => v.name),
        },
        grid:{
          left:'9%',
          right:'1%',
          top:'20%',
          bottom:'9%',
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show:true,
            lineStyle: {
              color: 'rgba(255,255,255,.8)'
            }
          },
          splitLine:{
            show:false,
            lineStyle: {    
              color: 'rgba(255,255,255,0.3)'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: this.xdata,
          axisLine: {
            show:true,
            lineStyle: {
              color: 'rgba(255,255,255,.8)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine:{
            show:false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
        },
        label: {
          show: false,
        },
        series: this.seriesdata
      };
      return option;
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.echartsData())
    },
  },
  mounted(){
    this.appendTotalSerires()
    this.$nextTick(function(){
      this.renderEcharts()
    })
  }
};
</script>

<style>
</style>
